<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <div class="easyui-pagination" data-options="total: 1000, pageSize: 30"
    style="background: 'gray'; border: 1px solid black;"></div>
  <div id="pagination"></div>
  <script type="text/javascript">
    $(function () {
      $("#pagination").pagination({
        //总记录的数目，在分页控件创建时初始的值，默认值为1
        total : 2000,
        //页面大小，默认值为10
        pageSize : 20,
        //可以改变的页面大小的集合，默认值为[10,20,30,50]
        pageList : [ 10, 20, 40, 50, 80 ],
        //在分页控件创建的时候显示的第几页，默认值为1
        pageNumber : 1,
        onSelectPage : function (pageNumber, pageSize) {
          //提醒分页控件正在加载中
          $(this).pagination("loading");
          console.log("第" + pageNumber + "页，每页最多容纳" + pageSize + "条记录");
          //提醒分页控件加载完成
          $(this).pagination("loaded");
        },
        //添加的自定义按钮
        buttons : [ {
          //显示背景图片的css类id
          iconCls : 'icon-add',
          //按钮被点击时调用的一个句柄函数
          handler : function () {
            alert('添加')
          }
        }, '-', {
          iconCls : 'icon-save',
          handler : function () {
            alert('保存')
          }
        } ],
        //数组定义的分页控件布局，该属性会使displayMsg属性失效
        layout: [ 'list', 'manual', 'first', 'links', 'last' ],
        afterPageText: '页，共{pages}页',
        //displayMsg: '当前页显示第{from}到{to}条记录，共{total}条记录',
        //是否显示页面信息，默认值为true
        //showPageInfo: false
      });
    })
  </script>
</body>
</html>